<template>
    <el-select v-model="value" placeholder="Select" style="width: 240px" @change="changevalue">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-input v-model="input" style="width: 240px" placeholder="Please input" @change="changeInput" />
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="age" label="Address" />
    </el-table>
</template>

<script setup>
import { zhCn } from 'element-plus/es/locales.mjs'
import { reactive, ref } from 'vue'
const value = ref('')
const input = ref('')
const options = [
    {
        value: 'age',
        label: '年龄',
    },
    {
        value: 'name',
        label: '名字',
    },
    {
        value: 'data',
        label: '时间',
    },
]
let tableData = ref(
    [
        {
            date: '2016-05-03',
            name: 'apple',
            age: 11,
        },
        {
            date: '2016-05-02',
            name: 'cat',
            age: 17,
        },
        {
            date: '2016-05-04',
            name: 'banana',
            age: 15,
        },
        {
            date: '2016-05-01',
            name: 'sdfg',
            age: 18,
        },
    ]
)
const changevalue = (value) => {
if(value == 'age'){
    tableData.value = tableData.value.sort((a, b) => {        
        return a.age > b.age ? 1 : -1
    })
}else if(value == 'name'){
    tableData.value = tableData.value.sort((a,b)=>a.name.localeCompare(b.name,zhCn))
}
    

}
const changeInput = (value)=>{
console.log(value);
tableData.value = tableData.value.filter((a)=>{
    return a.name == value
})
console.log(tableData);

}
</script>

<style lang="scss" scoped></style>